<template>

    <div id="tb">
        <div id="block"  >
            <span id="sp"  >请选择月份：</span>
            <el-date-picker id="eld"

                            v-model="value2"
                            type="month"
                            value-format="yyyy-MM"
                            placeholder="选择月"
                            @change="myEcharts">
            </el-date-picker>
        </div>
        <div id="main" style="width: 1200px;height:600px;"></div></div>

</template>

<script>

    export default {

        name: "Echarts",
        data() {
            return {
                value2: '2020'
            }
        },
        created() {
            //根据token获取用户的信息
            setTimeout( ()=>{ //延时加载echarts初始化函数
                this.myEcharts()

            },100)
        },
        methods:{

            myEcharts(){

                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById('main'));
                var chardate;
                this.$http.post(`statistics/selectTbOrder/${this.value2}`).then(function (response) {
                    console.log(response.data.result)
                    chardate=response.data.result.chardata

                    console.log(chardate)



                    var option = {
                        title: {
                            text:'网站收入统计',
                            // subtext:'在此测试',
                            x:'center',
                            y:'top',
                            textAlign:'left',
                            "textStyle": {
                                //文字颜色
                                color:'#333',
                                //字体风格,'normal','italic','oblique'
                                fontStyle:'normal',
                                //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                                fontWeight:'normal',
                                //字体系列
                                fontFamily:'KaiTi',
                                fontSize: 40
                            }

                        },
                        tooltip: {
                            trigger: 'axis'
                        },

                        xAxis: {
                            //'category' 类目轴，适用于离散的类目数据
                            type: 'category',
                            data: chardate.day,
                            "axisLabel":{
                                interval: 0,
                                textStyle: {
                                    color: "green",
                                    fontSize: 11
                                }
                            }
                        },
                        yAxis: {
                            type: 'value',
                            position: 'left',
                            axisLine: {
                                show: true,
                            },
                            axisLabel: {
                                formatter: '{value} 元'
                            },
                        },

                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    xAxisIndex: 'none'
                                },

                                dataView: {show: true, readOnly: false},
                                // magicType动态切换      type:line折线图，bar柱状图
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },

                        series: [{
                            data: chardate.price,
                            type: 'line'
                        }]


                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                })
            }}
    }

</script>

<style>
    #tb{
        height: 100%;
        background-color: white;
    }
    #block{
        text-align: left;
        margin-left: 30px;
        margin-top: 5px;
        width: 1000px;
        height: 60px;
        display:flex ;
        justify-content:flex-start
    }
    #sp{
        font-family:KaiTi ;
        font-size: 23px;
        margin-top: 15px;
        width: 150px;
        height: 30px;
    }
    #eld{
        width: 210px;
        height: 50px;
    }


</style>